<template>
<div class="distributor-poster views-container">
  <div class="wlm-form">
    <div class="wlm-form-header">分销海报设置</div>
    <div class="wlm-form-notice warning">
      <p>注：可拖动头像、二维码、昵称调整位置，如修改</p>
      <p>注：修改后如需生效请前往 <router-link tag="span" to="/user/managementUser">
          <el-button type="text" size="small">设置-清理缓存</el-button>
        </router-link> ，清除临时图片</p>
    </div>
    <div class="flex-row" style="padding:10px 20px 50px;">
      <div class="pannel__left">
        <div id="j-preview" class="poster-preview flex-col flex-justify-c flex-align-c"><img id="preview-backdrop" src="https://yoshop.weliam.cn/assets/store/img/dealer/backdrop.png" alt="" class="backdrop">
          <div id="j-qrcode" class="drag pre-qrcode" :class="{'circle':radio==='2'}" v-bind:style="{'width':value9+`px`,'height':value9+`px`}" style="top: 128px; ">
            <img src="http://we7.weliam.cn/attachment/wx1dc527e460383396/avatar.jpg" alt="">
          </div>
            <div id="j-avatar" class="drag pre-avatar" :class="{'circle':radio==='2'}" v-bind:style="{'width':value7+`px`,'height':value7+`px`}" style="top: 18px; "><img src="https://img.hipintuan.cn/images/2/2018/12/15450986945c1855c69d1b60.23289468.jpeg" alt=""></div>
              <div id="j-nickName" class="drag pre-nickName" v-bind:style="{'font-size':value8+`px`,'color':color1}"><span>这里是昵称</span></div>
            </div>
          </div>
          <div class="wlm-form-content">
            <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
              <el-form-item label="海报背景图" prop="username">
                选择图片
                <div class="form-help">尺寸：宽750像素 高度不限</div>
              </el-form-item>
              <el-form-item label="头像宽度" prop="nickname" class="slider">
                <el-slider style="width:400px;" v-model="value7" :min="30" :max="200" show-input>
                </el-slider>
              </el-form-item>
              <el-form-item label="头像样式" prop="password">
                <el-radio-group v-model="radio">
                  <el-radio label="1">正方形</el-radio>
                  <el-radio label="2">椭圆形</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="昵称字体大小" prop="repassword" class="slider">
                <el-slider style="width:400px;" v-model="value8" :min="12" :max="50" show-input>
                </el-slider>
              </el-form-item>
              <el-form-item label="昵称字体颜色" prop="repassword">
                <el-color-picker v-model="color1"></el-color-picker>
              </el-form-item>
              <el-form-item label="小程序码宽度" prop="repassword" class="slider">
                <el-slider style="width:400px;" v-model="value9" :min="50" :max="200" show-input>
                </el-slider>
              </el-form-item>
              <el-form-item label="小程序码样式" prop="password">
                <el-radio-group v-model="radio">
                  <el-radio label="1">正方形</el-radio>
                  <el-radio label="2">椭圆形</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/user/managementUser', code: 1 }})" type="primary">保存</el-button>
      </div>
    </div>
</template>

<script>
// import { userAdd } from '@/api/user'
import {
  userAdd
} from '@/api/user'
import {
  regPhone,
  regPassword
} from '@/utils/regular'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'DistributorPoster',
  components: {

  },
  directives: {

  },
  data() {
    var mobile = (rule, value, callback) => {
      if (!regPhone(value)) {
        return callback(new Error('注册手机号格式不正确'))
      } else {
        callback()
      }
    }

    var checkPwd = (rule, value, callback) => {
      if (!regPassword(value)) {
        return callback(new Error('密码格式错误'))
      } else {
        callback()
      }
    }
    var checkPass = (rule, value, callback) => {
      if (value !== this.formFormatData.formData.password) {
        return callback(new Error('两次密码输入不一致'))
      } else {
        callback()
      }
    }
    return {
      color1: '#000000',
      value7: 70,
      value8: 14,
      value9: 100,
      radio: '1',
      formFormatData: {
        key: 'userForm',
        api: {
          // editForm
          submitForm: userAdd
        },
        formData: {
          nickname: '',
          password: '',
          repassword: '',
          username: ''
        },
        rules: {
          nickname: [{
            required: true,
            message: '请输入真实姓名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            validator: checkPwd,
            trigger: 'blur'
          }
          ],
          repassword: [{
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          },
          {
            validator: checkPass,
            trigger: 'blur'
          }
          ],
          username: [{
            required: true,
            message: '请输入用户手机号',
            trigger: 'blur'
          },
          {
            validator: mobile,
            trigger: 'blur'
          }
          ]
        }
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.distributor-poster {
  .am-fl {
    float: left;
  }

  .poster-preview {
    width: 377px;
    height: auto;
    min-height: 500px;
    margin: 0 auto;
    border: 1px solid #ccc;
    position: relative;
  }

  .poster-preview .drag.pre-avatar.circle img {
    border-radius: 100%;
  }

  .poster-preview img {
    display: block;
    width: 100%;
    height: auto;
  }

  .poster-preview .drag.pre-qrcode {
    width: 100px;
    height: 100px;
  }

  .poster-preview .drag {
    position: absolute;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    top: 0;
  }

  .poster-preview .drag.pre-qrcode.circle img {
    border-radius: 100%;
  }

  .poster-preview img {
    display: block;
    width: 100%;
    height: auto;
  }

  .poster-preview .drag.pre-avatar {
    width: 70px;
    height: 70px;
  }

  .poster-preview .drag {
    position: absolute;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    top: 0;
  }

  .poster-preview .drag.pre-nickName {
    font-size: 14px;
    line-height: 1;
    color: rgb(0, 0, 0);
    top: 99px;
  }

  .poster-preview .drag.pre-nickName span {
    display: block;
  }

  /deep/ .el-color-picker__trigger {
    width: 56px;
  }
}
</style>
